<%@page import="online_store.model.dto.UserDTO"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
<title>Login and Registration Form with HTML5 and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico"> 
<link rel="stylesheet" type="text/css" href="../css/login_style.css" />
<link rel="stylesheet" type="text/css" href="../css/animate-custom.css" />

<link rel="stylesheet" type="text/css" href="../style.css" />
<script type="text/javascript" src="js/boxOver.js"></script>
</head>
<body>

	<div id="main_container">

		<%@include file="../templates/header.jsp"%>

		<div id="main_content">

			<%@include file="../templates/top.jsp"%>

			<%@include file="../templates/crumb_navigation.jsp"%>

			<!-- end of menu tab -->

			<%@include file="../templates/left.jsp"%>

			<!-- end of left content -->

<%
	UserDTO user = (UserDTO) request.getAttribute("userDTO");
%>

       <div class="center_content">
          <div class="container">
            <!-- Codrops top bar -->
            <section>				
                <div id="container_demo" >
                    <div id="wrapper" style="min-height: 770px">
                        <div id="login" class="animate form">
                            <form  action="updateUser" method="POST" autocomplete="on"> 
                                <h1>My Account</h1> 
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                                    <input id="username" name="username" value="<%= user.getUsername()%>" required="required" type="text" placeholder="myusername"/> <!-- or mymail@mail.com -->
                                </p>
                                <p> 
                                    <label for="email" class="youmail" data-icon="e" > Your email</label>
                                    <input id="email" name="email" value="<%= user.getEmail()%>" required="required" type="email" placeholder="mysupermail@mail.com"/> 
                                </p>
                                <p class="keeplogin" style="margin-bottom: 5px;"> 
									<input type="checkbox" name="change_password" id="change_password" value="true" onchange="disableChangePass(this)"/> 
									<label for="change_password">Change password</label>
								</p>
                                <p> 
                                    <label for="current_password" class="youpasswd" data-icon="p"> Your current password </label>
                                    <input id="current_password" name="current_password" required="required" type="password" placeholder="eg. X8df!90EO" disabled="disabled"/> 
                                </p>
                                <p> 
                                    <label for="new_password" class="youpasswd" data-icon="p">Your new password </label>
                                    <input id="new_password" name="new_password" required="required" type="password" disabled="disabled" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p> 
                                    <label for="new_password_confirm" class="youpasswd" data-icon="p">Please confirm your new password </label>
                                    <input id="new_password_confirm" name="new_password_confirm" oninput="check(value)" required="required" type="password" disabled="disabled" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="login button"> 
                                    <input type="submit" value="Update" /> 
								</p>
                                <p class="change_link">
									Not a member yet ?
								</p>
                            </form>
                        </div>

						
                    </div>
                </div>  
            </section>
        </div>
	</div>
			

<script>
	function disableChangePass(element){
		if(element.checked == true){
			document.getElementById("current_password").removeAttribute("disabled");
			document.getElementById("new_password").removeAttribute("disabled");
			document.getElementById("new_password_confirm").removeAttribute("disabled");
		}else{
			document.getElementById("current_password").setAttribute("disabled", "disabled");
			document.getElementById("new_password").setAttribute("disabled", "disabled");
			document.getElementById("new_password_confirm").setAttribute("disabled", "disabled");
		}
	}
</script>








			<!-- end of center content -->

			<%@include file="../templates/right.jsp"%>

			<!-- end of right content -->
		</div>
		<!-- end of main content -->

		<%@include file="../templates/footer.jsp"%>

	</div>

</body>
</html>